<template>
	<view class="content">
		<view class="backgroudImg" :style="{'background-image':'url('+playList.coverImgUrl+')'}"></view>
		<navbar :appname="title" :icon="iconshow" :textColor="color" v-show="flag"></navbar>
		<view class="container" v-show="flag">
			<scroll-view scroll-y="true">
				<view class="list-head">
					<view class="music-charts-img">
						<image :src="playList.coverImgUrl"></image>
						<text class="iconfont icon-xiangyousanjiaoxing">{{playList.playCount | formatCount}} </text>
					</view>
					<view class="music-charts-detail">
						<view>{{playList.name}}</view>
						<view>
							<image :src="playList.coverImgUrl"></image>
							<text>{{appname}}</text>
						</view>
						<view>{{playList.description}}
						</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="music-share">
					<text class="iconfont icon-fenxiang"></text>
					<text>{{shareTips}}</text>
				</button>
				<!-- #endif -->
				<view class="music-list">
					<view class="music-title">
						<text class="iconfont icon-bofang" @tap="handleToDetail(playList.tracks[0].id)"></text>
						<text>播放全部</text>
						<text>(共{{playList.trackCount}}首)</text>
					</view>
					<view class="music-list-song" v-for="(item,index) in playList.tracks" :key="index" @tap="handleToDetail(item.id)">
						<view class="music-song-head">{{index + 1}}</view>
						<view class="music-song-detail">
							<view>{{item.name}}</view>
							<view>
								<image :src="playList.coverImgUrl"></image>
								<text>{{item.ar[0].name}} - {{item.name}}</text>
							</view>
						</view>
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import navbar from '@/components/navbar/navbar.vue';
	import {listDetailData} from '../../common/api.js'
	export default {
		components:{
			navbar
		},
		data() {
			return {
				appname:"海豚音乐",
				flag:false,
				title:"歌单",
				iconshow:true,
				color:"white",
				shareTips:"分享给微信好友",
				playList:{
					coverImgUrl:'',
					trackCount:0,
					description:'',
					name:'',
					tracks:{
						
					}
				},
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '请稍等，加载中……',
				mask: false
			});
			// console.log(options.listId)
			listDetailData(options.listId).then((res)=>{
				if (res[1].data.code == "200"){
					// let detailData = 
					this.playList  = res[1].data.playlist
					this.$store.commit('INIT_TOPLISTIDS',res[1].data.playlist.trackIds)
					uni.hideLoading()
					this.flag = true
				}
			})
			
		},
		onShow() {
			if(this.$store.state.bgAudio){
				this.$store.state.bgAudio.destroy()
			}
		},
		methods: {
			handleToDetail(songId){
				uni.navigateTo({
					url: '../detail/detail?songId=' + songId,
					
				});
			}
		},
	}
</script>

<style scoped>
 .content{
	 
 }
 
 .list-head{
	 display: flex;
	 margin: 30rpx;
 }
 
 .music-charts-img{
	 position: relative;
	 width: 264rpx;
	 height: 264rpx;
	 border-radius: 30rpx;
	 overflow: hidden;
	 margin-right: 42rpx;
 }
 
 .music-charts-img image{
 	 width: 100%;
	 height: 100%;
 }
 
 .music-charts-img text{
 	 position: absolute;
	 top: 8rpx;
	 right: 8rpx;
	 color: white;
	 font-size: 26rpx;
 }
 
 .music-charts-detail{
	 flex:1;
	 color:#f0f2f7;
 }
 
 .music-charts-detail view:nth-child(1){
 	 color: white;
	 font-size: 34rpx;
 }
 
 .music-charts-detail view:nth-child(2){
 	 display: flex;
	 margin: 20rpx 0;
	 font-size: 28rpx;
	 align-items: center;
 }
 
 .music-charts-detail view:nth-child(2) image{
 	 width: 54rpx;
	 height: 54rpx;
	 border-radius: 50rpx;
	 margin-right: 14rpx;
 }
 
 .music-charts-detail view:nth-child(3){
 	 font-size: 22rpx;
	 line-height: 34rpx;
 }
 
 .music-share{
	 width: 330rpx;
	 height: 74rpx;
	 /* display: flex; */
	 margin: 20rpx auto;
	 /* align-items: center; */
	 background: rgba(0,0,0,0.4);
	 border-radius: 37rpx;
	 color: white;
	 line-height: 74rpx;
	 text-align: center;
	 font-size: 28rpx;
 }
 
 .music-share text{
	 margin-right: 16rpx;
 }
 
 .music-list{
	 width: 100%;
	 background: white;
	 margin-top: 40rpx;
	 border-radius: 50rpx;
	 overflow: hidden;
 }
 
 .music-title{
	 height: 50rpx;
	 margin: 30rpx 0 70rpx 22rpx;
 }
 
 .music-title text:nth-child(1){
 	 height: 50rpx;
	 font-size: 50rpx;
 }
 
 .music-title text:nth-child(2){
	 margin: 0 10rpx 0 26rpx;
 	 font-size: 30rpx;
 }
 
 .music-title text:nth-child(3){
 	 font-size: 26rpx;
	 color: #b2b2b2;
 }
 
 .music-list-song{
	 display: flex;
	 margin: 0 32rpx 66rpx 46rpx;
	 align-items: center;
	 color: #959595;
 }
 
 .music-song-head{
	 width: 58rpx;
	 font-size: 30rpx;
	 line-height: 30rpx;
 }
 
 .music-song-detail{
	 flex:1
 }
 
 .music-song-detail view:nth-child(1){
	 font-size: 28rpx;
	 color: black;
	 width: 65vw;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 white-space:nowrap;
 }
 
 .music-song-detail view:nth-child(2){
	 display: flex;
 	 font-size: 20rpx;
	 align-items: center;
 }
 
 .music-song-detail view:nth-child(2) image{
 	 width: 32rpx;
	 height: 20rpx;
	 margin-right: 10rpx;
	 
 }
 
 
.music-song-detail view:nth-child(2) text{
 	 width: 60vw;
	 font-size: 20rpx;
 	 overflow: hidden;
 	 text-overflow: ellipsis;
 	 white-space:nowrap;
 }

.music-list-song text{
 	 font-size: 50rpx;
	 color:#c7c7c7;
 }
</style>
